<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>123</div>
<a href="https://www.baidu.com">百度</a>
<form action="https://www.baidu.com">
    <input name="sub" type="submit" value="提交">
</form>

<script>
    // 常见事件对象的属性和方法
    // 1.返回事件对象类型       比如 click mouseover 不带前缀on
    var div = document.querySelector('div');
    div.addEventListener('click', fn);
    div.addEventListener('mouseover', fn);
    div.addEventListener('mouseout', fn);

    function fn(e) {
        console.log(e.type)
    }

    // 2.阻止默认行为 (事件)  让链接不跳转, 或则让提价按钮不提交
    var a = document.querySelector('a');
    var form = document.querySelector('form');

    a.addEventListener('click', function (e) {
        // prevent 防止
        e.preventDefault(); // dom 标准写法
    })

    // 3.传统的注册方式
    a.onclick = function (e) {
        // 普通浏览器 e.preventDefault(); 方法
        // e.preventDefault();
        // 低版本浏览器 ie678 returnValue 属性
        // e.returnValue;
        // 我们可以利用 return false 也能阻止默认行为 没有兼容性问题
        //  特点: return后面的代码不能执行了, 且只限于传统的注册方式 (即不能用在addEventLister)
        return false;
        alert(11);
    }

</script>
</body>
</html>
